<template>
    <div style="position:relative;" class="container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="模型库" name="first">
                <div class="container">
					<div style="position: relative;">
						<div style="margin-bottom:20px;">
							<el-input v-model="searchName" style="width:200px;"></el-input>
							<el-button type="primary" icon="el-icon-search" style="margin-left:10px;" @click="handleSearch">搜索</el-button>
						</div>

						<div style="position: absolute;right:0;top:0;" v-if="fen">
							 <router-link to="/modelbase/addedzw"><el-button type="primary" class="addedshebei">增加作物</el-button></router-link>
						</div>
					</div>

                    <div v-for="(item,index) in tableData" :key="index" style="margin-top:20px;" class="classify" @click="targetclassify(item.id,index)">
                        <img :src="item.displayImg" class="oneclassify" alt="" :class="{isActive:ifshow==index}" >
                        <div class="oneclassifyname">{{item.name}}</div>
                    </div>
					<div class="lower">
						<div style="display: block;">
							 <div v-for="(item,index) in lowerlist1" :key="index" class="classify" @click="targetlower(item.id)">
								<img :src="item.img" class="oneclassify1" alt="">
								<div class="oneclassifyname">{{item.name}}</div>
							</div>
						</div>
					</div>
					<div>
						<div v-for="(item,zindex) in list" :key="zindex" style ="margin:20px;">
							<div class="lu hnk"></div><div class="hnk jgxx">{{item.name}}</div>
							<div>
								<div v-for="(item,index) in item.modelClassifyList" :key="index" class="classify" @click="targetlower(item.id)">
									<img :src="item.img" class="oneclassify1" alt="">
									<div class="oneclassifyname">{{item.name}}</div>
								</div>
							</div>

						</div>
					</div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="分类管理" name="second">

                <div class="container">
					<div class="newadd" v-if="fen1">
					     <router-link to="/modelbase/addedfl"><el-button type="primary" class="addedshebei">增加分类</el-button></router-link>
					</div>
                   <el-table
                        :data="tableData"
                        style="width: 100%;margin: 20px 0px;"
                        row-key="id"
                        border
                        :default-expand-all="false"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column
                            prop="name"
                            label="分类名称"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="displayImg"
                            label="分类图标"
                            width="180">
                            <template slot-scope="scope">
                                <img v-if="scope.row.displayImg != '' && scope.row.displayImg != null" :src="scope.row.displayImg" style="width:40px;height:40px;" alt="">
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="分类级别">
                        </el-table-column>
                        <el-table-column
                            prop="sort"
                            label="排序">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    class="red"
                                    @click="added(scope.$index, scope.row)"
                                    v-if="status == scope.row.type"
                                >添加</el-button>
                               <el-button
                                    type="text"
                                    @click="handleamend(scope.$index, scope.row)"
                                >修改</el-button>
                                <el-button
                                    type="text"
                                    @click="handleremove(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="温馨提示" :visible.sync="editVisible" width="30%">
                <el-radio v-model="radio" label="1">只删除父级分类</el-radio>
                <el-radio v-model="radio" label="2">删除父级及所有子级分类</el-radio>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="温馨提示" :visible.sync="editVisible1" width="30%">
              <div>确认删除该子级分类</div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit1">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

    import { model_findByList,model_findByOneId,model_findByParentId,momdel_delete,model_crop_srarch,modecategory_tree,modecategory_dele,model_crop_category } from "@/request/api"
export default {
    data() {
        return {
			searchName:'',
			ifshow:0,
			lowerlist1:[],
			list:[],
			ruleForm:{
				creditCodeImage:null
			},
            lowerlist:'',
            status:'一级分类',
            form:'',
            radio:'1',
            fen:true,
            fen1:false,
            activeName: 'first',
            name:'',
            editVisible:false,
            editVisible1:false,
            tableData: [],
            id:'',
            type:''
        }
    },
    methods:{
		getDetailTree(){
			modecategory_tree("").then((res)=>{

				this.tableData = res.data
				if(this.tableData.length>0){
					this.targetclassify(this.tableData[0].id,0)
					this.ids = this.tableData[0].id
				}

				for(var i=0;i<this.tableData.length;i++){
					var ele = this.tableData[i]
					// this.tableData[i].displayImg = this.$store.state.imageUrls +  this.tableData[i].displayImg
					this.tableData[i].displayImg = 'https://bbgy.cpzsyun.com:82/api/plant/file/show/' +  this.tableData[i].displayImg
					// this.tableData[i].clickImg = this.$store.state.imageUrls +  this.tableData[i].clickImg
					if(ele.type == 0){
						ele.type = "一级分类"
						this.tjxianshi = true
					}
					if(ele.type == 1){
						ele.type = "二级分类"
						this.tjxianshi = false
					}
					ele.children = ele.children
					for(var j=0;j<ele.children.length;j++){
						var rst = ele.children[j]
						if(rst.type == 0){
							rst.type = "一级分类"
							this.tjxianshi = true
						}
						if(rst.type == 1){
							rst.type = "二级分类"
							this.tjxianshi = false
						}
					}
				}
			})
		},

		handleSearch(){
			let data = {
				categoryId:this.ids,
				name:this.searchName
			}
			model_crop_srarch(data).then((res)=>{
				this.lowerlist1 = res.data
				this.ifshow = -1
				for(var i=0;i<this.lowerlist1.length;i++){
					 this.lowerlist1[i].img = 'https://bbgy.cpzsyun.com:82/api/plant/file/show/' + this.lowerlist1[i].img
				}
				this.list = ""
			})
		},
        targetlower(id){
            this.$router.push({
                path:'/modelbase/cropcheck',
                query:{
                    id:id
                }
            })
        },
        targetclassify(id,index){
			this.ifshow = index
			this.ids = id
			this.lowerlist = []
			this.lowerlist1 = []
			model_crop_category(id).then((res)=>{
				this.lowerlist = res.data
				this.list = this.tableData[index].children
				for(var i=0;i<this.lowerlist.length;i++){
					this.lowerlist[i].img = 'https://bbgy.cpzsyun.com:82/api/plant/file/show/' + this.lowerlist[i].img + "?ys=1"
					for(var k=0;k<this.tableData.length;k++){
						if(this.lowerlist[i].categoryId == this.tableData[k].id){
							this.lowerlist1.push(this.lowerlist[i])
						}
					}
				}
				for(var s=0;s<this.list.length;s++){
					this.list[s].modelClassifyList = []
					for(var r=0;r<this.lowerlist.length;r++){
						if(this.lowerlist[r].categoryId == this.list[s].id){
							this.list[s].modelClassifyList.push(this.lowerlist[r])
						}

					}
				}
			})

        },
        handleamend(index,row){
            this.$router.push({
                path:'/modelbase/editfl',
                query:{
                    id:row.id
                }
            })
        },

        handleClick(){
            if(this.activeName == "first"){
                this.fen = true
                this.fen1 = false
            }
            if(this.activeName == "second"){
                this.fen = false
                this.fen1 = true
            }
        },
        added(index,row){
            this.$router.push({path:'/modelbase/addedfl'})
        },
        handleremove(index,row){
            this.type = row.type
            this.id = row.id
            if(row.type == "一级分类"){
                this.editVisible = true
            }
            if(row.type == "二级分类"){
                this.editVisible1 = true
            }
        },
        saveEdit(){
            this.editVisible = false
            if(this.radio == 1){
                this.type = 1
            }
            if(this.radio == 2){
                this.type = 0
            }
            modecategory_dele(this.id +'/'+ this.type).then((res)=>{
                this.$message.success("删除成功")
                this.getDetailTree()
            })
            .catch((res)=>{
                this.$message.error("删除失败")
            })
        },
        saveEdit1(){
            this.editVisible = false
            modecategory_dele(this.id +'/'+ 1).then((res)=>{
                this.$message.success("删除成功")
                this.getDetailTree()
            })
            .catch((res)=>{
                this.$message.error("删除失败")
            })
        },




    },
    mounted(){
       console.log(1414141414)
		this.getDetailTree()
        // this.getoneclassify()
    }

};
</script>

<style scoped>
	.isActive{
		display:block; margin:0 auto;
		position:relative;
		filter: drop-shadow(0px 0 yellow);
		/* transform: translate(-39px, 0); */
		overflow:hidden;
	}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;

}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.reds{
    color: red;
}
.sousuo{
    position: absolute;
    top:30px;
    left:180px;
}
.newadd{
    /* position: absolute; */
	float: right;
	margin-bottom:20px;
  /*  right:20px;
    top:20px; */
}
.oneclassify{
    width:70px;
    height:70px;
}
.oneclassify1{
    width:70px;
    height:70px;
    border-radius:50%;
}
.oneclassifyname{
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.classify{
    width:70px;
    display:inline-block;
    margin:10px;
}
 .lu{
        width: 8px;
        height: 16px;
        background: greenyellow;
    }
    .hnk{
        display:inline-block;
    }
    .jgxx{
        margin-left:10px ;
        font-weight:600;
        font-size: 15px;
    }
</style>
